<template>
  <div class="advance-container">
    <md-whiteframe md-tag="section" md-elevation="4" class="md-small">
      <h4 class="search-title">普通搜索</h4>
      <div class="md-accent md-button-toggle md-theme-blue">
        <md-button :disabled="safeMode === true" name="f_doujinshi" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_doujinshi}" class="doujinshi" >DOUJINSHI</md-button>
        <md-button :disabled="safeMode === true" name="f_manga" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_manga}" class="manga">MANGA</md-button>
      </div>
      <div class="md-accent md-button-toggle md-theme-blue">
        <md-button :disabled="safeMode === true" name="f_artistcg" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_artistcg}" class="artistcg">ARTIST CG</md-button>
        <md-button :disabled="safeMode === true" name="f_gamecg" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_gamecg}" class="gamecg">GAME CG</md-button>
      </div>
      <div class="md-accent md-button-toggle md-theme-blue">
        <md-button :disabled="safeMode === true" name="f_western" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_western}" class="western">WESTREN</md-button>
        <md-button name="f_non-h" @click.native="toggleCategory" :class="{'md-toggle': basicSearch['f_non-h']}" class="non-h">NON-H</md-button>
      </div>
      <div class="md-accent md-button-toggle md-theme-blue">
        <md-button :disabled="safeMode === true" name="f_imageset" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_imageset}" class="imageset">IMAGE-SET</md-button>
        <md-button :disabled="safeMode === true" name="f_cosplay" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_cosplay}" class="cosplay">COSPLAY</md-button>
      </div>
      <div class="md-accent md-button-toggle md-theme-blue">
        <md-button :disabled="safeMode === true" name="f_asianporn" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_asianporn}" class="asian-porn">ASIAN PORN</md-button>
        <md-button :disabled="safeMode === true" name="f_misc" @click.native="toggleCategory" :class="{'md-toggle': basicSearch.f_misc}" class="misc">MISC</md-button>
      </div>
    </md-whiteframe>
    <md-whiteframe md-tag="section" md-elevation="4" class="md-small">
      <h4 class="search-title">高级搜索</h4>
      <div class="search-params">
        <md-checkbox name="f_sname" @change="setSearch" :value="Boolean(advanceSearch.f_sname)">搜索画廊</md-checkbox>
        <md-checkbox name="f_stags" @change="setSearch" :value="Boolean(advanceSearch.f_stags)">搜索画廊标签</md-checkbox>
      </div>
      <div class="search-params">
        <md-checkbox name="f_sdesc" @change="setSearch" :value="Boolean(advanceSearch.f_sdesc)">搜索画廊描述</md-checkbox>
        <md-checkbox name="f_storr" @change="setSearch" :value="Boolean(advanceSearch.f_storr)">搜索种子文件名</md-checkbox>
      </div>
      <div class="search-params">
        <md-checkbox name="f_sto" @change="setSearch" :value="Boolean(advanceSearch.f_sto)">仅显示有种子的画廊</md-checkbox>
        <md-checkbox name="f_sdt1" @change="setSearch" :value="Boolean(advanceSearch.f_sdt1)">搜索低愿力标签</md-checkbox>
      </div>
      <div class="search-params">
        <md-checkbox name="f_sdt2" @change="setSearch" :value="Boolean(advanceSearch.f_sdt2)">搜索差评标签</md-checkbox>
        <md-checkbox name="f_sh" @change="setSearch" :value="Boolean(advanceSearch.f_sh)">显示被删除的画廊</md-checkbox>
      </div>
      <div class="search-params">
        <md-checkbox name="f_sr" @change="setSearch" :value="Boolean(advanceSearch.f_sr)">最低评分</md-checkbox>
        <md-input-container>
          <label for="f_srdd">分数</label>
          <md-select name="f_srdd" :value="3" @change="setRating">
            <md-option value="0">无星</md-option>
            <md-option value="1">一星</md-option>
            <md-option value="2">二星</md-option>
            <md-option value="3">三星</md-option>
            <md-option value="4">四星</md-option>
            <md-option value="5">五星</md-option>
          </md-select>
        </md-input-container>
      </div>
    </md-whiteframe>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  methods: {
    ...mapMutations([
      'SET_SEARCHPARAMS',
      'RESET_SEARCH'
    ]),
    toggleCategory (e) {
      let catName = e.target.getAttribute('name')
      this.SET_SEARCHPARAMS({name: catName, value: Number(!this.basicSearch[catName])})
    },
    setSearch (value, e) {
      let catName = e.target.children[0].getAttribute('name')
      this.SET_SEARCHPARAMS({name: catName, value: Number(!this.advanceSearch[catName])})
    },
    setRating (e) {
      this.SET_SEARCHPARAMS({name: 'f_srdd', value: Number(e)})
    }
  },
  computed: {
    ...mapState({
      searchParams: state => state.common.search.searchParams,
      safeMode: state => state.common.safeMode
    }),
    basicSearch () {
      return this.searchParams.basicSearch
    },
    advanceSearch () {
      return this.searchParams.advSearch
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.advance-container {
  overflow: auto;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 2;
  padding: .453rem;
}
.advance-container>section {
  padding: .624rem;
  margin-bottom: 1rem
}
.md-button-toggle {
  display: flex
}
.md-button-toggle>.md-button {
  flex: 1;
  margin-top: .324rem;
}
.md-button-toggle>.md-button:last-child {
  margin-left: .624rem
}
.search-params {
  display: flex
}
.search-params > div {
  display: flex;
  flex: 1
}
</style>
